<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<!-- show-action="true" -->
		<!-- clearabled="true" -->
	
		<!-- <view class="search searchFloat" > -->
			<!-- <u-search placeholder="231613156" class="my-search" v-model="keyword" shape="round" action-text="搜索"
				@search="findList" @custom='searchClick' @clear="clearSearch" focus>
			
			</u-search> -->
			<view class="search searchFloat">
				<!-- <uni-row>
					<uni-col :span="23"> -->
						<u-search placeholder="231613156" class="my-search" 
						v-model="form.inbillNumber" shape="round" action-text="搜索"
							@search="findList" @custom='searchClick' @clear="clearSearch" focus>
						
						</u-search>
					<!-- </uni-col> -->
					<!-- <uni-col :span="">
						
					</uni-col>
				</uni-row>
				 -->
			</view>
		<!-- </view> -->
		<uni-collapse style="margin-top: -1rpx;">
			<uni-collapse-item title="" :show-animation="true">
				<!-- <view class="content">
					<text class="text">默认开启组件动画，使用动画效果折叠内容会有一个从上到下的动画。</text>
				</view> -->
				<u-form :model="form" ref="uForm" class="search-item" label-width="104px" >
					<u-form-item label="货主"><u-input v-model="form.huoz_id" /></u-form-item>
					<u-form-item label="商品编号"><u-input v-model="form.goodsId" /></u-form-item>
					<u-form-item label="单位信息"><u-input v-model="form.unit" /></u-form-item>
					<u-form-item label="托盘号"><u-input v-model="form.palletNumber" /></u-form-item>
				</u-form>
			</uni-collapse-item>
		</uni-collapse>
		<!-- <uni-section title="使用动画效果" type="line"> -->
		
		</uni-section>

		<u-empty v-if="!list.length" text="无数据" mode="page"></u-empty>
		<u-cell-group>
			<view v-for="(item, index) in list" :key="index">
				<!-- <u-cell-item :title="item.code" :label="item.remark" @click="goTo(item.code)">
						<u-tag :text="getTyp(item.type)" :type="getCss(item.type)" />
				</u-cell-item> -->
				<view class="my-item" @click="goTo(item.code)">
					<view class="item-head">
						<!-- 出库单[INCONV10011841201612808000168] -->
						<!-- <u-cell-item :title="item.code" :label="item.remark" @click="goTo(item.code)"> -->
						<!-- <u-tag :text="getTyp(item.type)" :type="getCss(item.type)" /> -->
						<!-- </u-cell-item> -->
						<!-- <u-cell-item > -->
						{{item.code}}
						<uni-icons style="float: right;" type="forward" size="13"></uni-icons>

						<!-- </u-cell-item> -->
						<!-- {{getTyp(item.type)}} -->

						<!-- <viw style="display: inline-block; float: right;margin-bottom: 20rpx;">
							更多
						</viw> -->
					</view>
					<view class="item-body">
						<view class="item-body-one">
							<view class="item-body-one-one">231613156</view>
							<view class="item-body-one-two">2023-12-08 11:21:41</view>
							<view class="item-body-one-three">出库</view>
						</view>

						<view class="item-body-two">
							<view class="item-body-two-one">科创公司香港有限公司</view>
							<view class="item-body-two-two">环节仓库</view>
						</view>


						<view class="item-body-three">
							<view class="item-body-three-one">总件数</view>
							<view class="item-body-three-two">20</view>
							<view class="item-body-three-three">总净重</view>
							<view class="item-body-three-four">20kg</view>
							<view class="item-body-three-five">新建</view>
						</view>
					</view>

				</view>
				<view class="item-foot"></view>
			</view>
		</u-cell-group>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					inbillNumber:'231613156',
								huoz_id: '',
								goodsId: '',
								unit: '',
								palletNumber:''
							},
				keyword: '231613156',
				list: [{
						code: '231613156'
					},
					{
						code: '231613156'
					},
					{
						code: '231613156'
					},
					{
						code: '231613156'
					},
					{
						code: '231613156'
					},
				],
			}
		},
		created() {},
		methods: {
			goTo(id) {
				uni.navigateTo({
					url: 'index?id=' + id
				});
			},
			findList() {
				this.$u.toast("输出的内容是" + this.keyword)

			},
			clearSearch() {
				this.keyword = ''
			},
			searchClick() {
				this.$u.toast("触发搜索方法,输出的内容是" + JSON.stringify(this.form))
			},
			
		}

	}
</script>
<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}
	.searchFloat{
		// border:1px solid red;
		width: 90%;
		// float:left;
		margin-top:-24rpx;
		position:absolute;
	}

	// .apply-text {
	// 	font-size: 28rpx;
	// 	color: #333333;

	// 	span {
	// 		color: #999999;
	// 	}
	// }

	// .user-images {
	// 	width: 28px;
	// 	height: 28px;
	// 	margin-right: 8px;
	// }

	// .apply-list-foot {
	// 	font-size: 28rpx;
	// }

	// .personnel-list {
	// 	display: flex;
	// 	align-items: center;
	// 	flex-wrap: wrap;

	// 	.personnel-user {
	// 		position: relative;
	// 		margin: 5px 9px 0;
	// 	}

	// 	.user-images {
	// 		width: 48px;
	// 		height: 48px;
	// 		margin-right: 0;

	// 	}

	// 	.iconfont {
	// 		position: absolute;
	// 		top: -12px;
	// 		right: -5px;
	// 		color: #FE0100;
	// 	}
	// }
	.more-button {
		margin-top: 35rpx;
		// margin-bottom:15rpx;
	}

	.my-search {
		padding: 10rpx 10rpx;
	}

	.search-item{
		padding:10rpx 50rpx;
	}
	.my-item {
		background-color: white;
		padding: 30rpx 24rpx 30rpx 24rpx;
		border-radius: 10rpx;
	}

	.my-stop {
		border-bottom: .5upx dashed #ccc;
	}

	.item-head {
		font-size: 12rpx;
		margin-right: 20rpx;
		color: black;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.item-body-one {
		font-size: 12rpx;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.item-body-one-one {
		display: inline-block;
		float: left;
		color: $uni-color-primary;
	}

	.item-body-one-two {
		display: inline-block;
		color: $uni-text-color-grey;
	}

	.item-body-one-three {
		display: inline-block;
		// margin-right: -37px;
		float: right;
		color: $uni-text-color-grey;
	}

	.item-body-two {
		font-size: 12rpx;
		margin-bottom: 20rpx;
		color: $uni-text-color-grey;
	}

	.item-body-two-one {
		font-size: 12rpx;
		display: inline-block;
		float: left;
	}

	.item-body-two-two {
		font-size: 12rpx;
		display: inline-block;
		float: right;
	}

	.item-body-three {
		margin-top: 54rpx;
		font-size: 12rpx;
		text-align: center;
		padding-top: 10rpx;
		border-top: .5upx solid #ccc;
	}

	.item-body-three-one {
		// margin-top: 20rpx;
		color: $uni-text-color-grey;
		display: inline-block;
		float: left;
	}

	.item-body-three-two {
		color: $uni-color-warning;
		display: inline-block;
		float: left;
		margin-left: 20rpx;
	}

	.item-body-three-three {
		color: $uni-text-color-grey;
		display: inline-block;
	}


	.item-body-three-four {
		color: $uni-color-warning;
		display: inline-block;
		margin-left: 20rpx;
	}

	.item-body-three-five {
		color: $uni-text-color-grey;
		display: inline-block;
		float: right;

	}

	.item-foot {
		height: 30rpx;
		background-color: #f0f0f0;
	}


	// <style lang="scss">
	.demo-uni-row {
		// margin-top: 30rpx;
		// margin-bottom: 10px;
		height: 30rpx;
		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	.demo-uni-row-zhan {
		// margin-bottom: 10px;
		height: 20rpx;
		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	.demo-uni-row-zhan2 {
		// margin-bottom: 10px;
		height: 15rpx;
		// 组件在小程序端display为inline
		// QQ、字节小程序文档写有 :host，但实测不生效
		// 百度小程序没有 :host
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	// 支付宝小程序没有 demo-uni-row 层级
	// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	::v-deep .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 22px;
		border-radius: 5px;
		text-align: right;
	}

	.import-msg {
		// height: 350rpx;
		border-radius: 25rpx;
		// width: 90%;
		// height: 30%;
		// margin-top: 500rpx;
		// position: absolute;
		// background-color: pink;
		// top: 165rpx;
		// left: 50rpx;
		z-index: 2;
		text-align: center;
		box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
		// margin-top: 200rpx;
		// position: relative;
		// top:-90rpx;
	}

	.common-msg {
		// background-color: pink;
		// margin-top: 80rpx;
		// padding-top: 50rpx;
	}

	.demo-uni-col-key {
		height: 22px;
		border-radius: 5px;
		text-align: left;
		font-size: 12rpx;
	}

	.demo-uni-col-value {
		height: 22px;
		border-radius: 5px;
		text-align: left;
		// padding-left: 3rpx;
	}

	.dark_deep {
		background-color: #99a9bf;
	}

	.dark {
		// background-color: #d3dce6;
	}

	.total {
		color: $uni-color-warning;
	}

	.big {
		font-size: 35rpx;
	}

	.light {
		// background-color: #e5e9f2;
		color: black;
		font-weight: bold;
	}

	.title {
		font-size: 30rpx;
		color: white;
	}

	.info {
		font-size: 20rpx;
	}

	.example-body {
		padding: 30rpx 30rpx 30rpx 30rpx;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		// padding: 15rpx 10rpx 0 10rpx;

		overflow: hidden;
		// height: 380rpx;
	}

	// 
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>